<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7"></p>
      <p class="big">年度作者偏好</p>
      <p class="o5">本年度一共阅读了{{ list.length }}位作者的书籍</p>
    </div>

    <div class="page-main-box">
      <div class="chart-text" id="chartText"></div>
    </div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'pageBookAuthor',
  props: ['reportData', 'pageIndex'],
  data () {
    return {
      list: [],
      myChart: null,
      rem: getComputedStyle(document.getElementsByTagName('html')[0]).fontSize.replace(/px/, '')
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data4)
          this.list = d.authorBorrows || []
        }
      }
    },
    pageIndex: {
      immediate: true,
      handler (val) {
        if (val === 3) {
          this.$nextTick(() => {
            this.initText()
          })
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    initText () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartText'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data4)
        list = d.authorBorrows || []
      }
      const sData = list.map(c => {
        return {
          name: c.author,
          value: c.borrowNum
        }
      })

      const color = [
        '#834399', '#6c437b', '#cc73e8', '#ebc1f9', '#a684b2'
      ]
      const option = {
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          keepAspect: false,
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          width: '90%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [0.28 * this.rem, 1.2 * this.rem],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 10,
          // 如果字体太大而无法显示文本，
          // 是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
          // 从echarts-wordcloud@2.1.0开始支持此选项
          shrinkToFit: true,

          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'SOURCEHANSERIFCN',
            fontWeight: 'bolder',
            color: function () {
              return color[Math.floor(Math.random() * color.length)]
            }
          },
          data: sData
        }]

      }
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #a667a6 0%, #d1a7d1 50%, #d1a7d1 85%, #a667a6 100%);
  background-size: 100%;
}
.chart-text {
  width: 100%;
  height: 100%;
}
</style>
